import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types';
import ScrollArea from 'react-scrollbar';
import './index.less';
import { DIRECTORIES, FILES } from '../../../../../../constant';
import { bytesToSize, dateFormat } from '../../../../../../utils/commonUtils';

class DataList extends PureComponent {

  static propTypes = {
    style: PropTypes.object,
    isCreateFolder: PropTypes.bool,
    changeCreateFolderStatus: PropTypes.func,
    files: PropTypes.object,
    category: PropTypes.object,
    folder: PropTypes.object
  };

  render () {
    // eslint-disable-next-line no-unused-vars
    const { style, isCreateFolder, files: allFiles } = this.props
    // 目录
    const directories = allFiles[DIRECTORIES]
    // 文件
    const files = allFiles[FILES]

    return (
      <>
        <p className="dataList_all_select" style={style}>
          <input type="checkbox" />
          全选
        </p>
        <div className="dataList_box" style={style}>
          <ScrollArea
            smoothScrolling
            speed={0.8}
            className="area"
          >
            <ul className="dataList">
              {
                directories
                  ?directories.map((item) => (
                    <li key={item.id} >
                      <p className="dataList_header">
                        <input type="checkbox" />
                        <span>
                          <i title="手机看" className="iconfont icon icon-sjck" />
                          <i title="分享" className="iconfont icon icon-share" />
                          <i title="更多" className="iconfont icon icon-more" />
                        </span>
                      </p>
                      <div className="dataList_imageBox">
                        <img src={item.url.replace('v2', 'v1')} alt="" />
                      </div>
                      <p className="dataList_title">
                        {
                          item.name
                        }
                      </p>
                      <p className="dataList_info">
                        {
                          dateFormat('MM-dd hh:mm', new Date(item.updateTime))
                        }
                      </p>
                    </li>
                  ))
                  :''
              }
              {
                files
                  ?files.map((item) => (
                    <li key={item.id}>
                      <p className="dataList_header">
                        <input type="checkbox" />
                        <span>
                          <i title="手机看" className="iconfont icon icon-sjck" />
                          <i title="分享" className="iconfont icon icon-share" />
                          <i title="更多" className="iconfont icon icon-more" />
                        </span>
                      </p>
                      <div className="dataList_imageBox" style={{ padding: (item.contentType.indexOf('image') !== -1)? '8px': '0' }}>
                        <img src={item.url.replace('v2', 'v1')} alt="" />
                      </div>
                      <p className="dataList_title">
                        {
                          item.name
                        }
                      </p>
                      <p className="dataList_info">
                        {
                          bytesToSize(item.size)
                        }
                      </p>
                    </li>
                  ))
                  :''
              }
            </ul>
          </ScrollArea>
        </div>
      </>
    );
  }
}

export default connect(
  (state) => ({
    files: state.files,
    category: state.category,
    folder: state.folder
  }),
  {}
)(DataList);
